{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}

    <div style="text-align: center">
        <p class="animate__animated animate__bounceInLeft">量表一</p>
    </div>


    <!-- 欢迎参加本次游戏 -->
    <div style="font-size:20px;">
        <p class="animate__animated animate__bounceInLeft">
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp请认真观察以下10种彩票，每种彩票都有两种购买方案，请您在两种方案中选出<b style="font-size: 24px">您认为最好的方案</b>，
            在您填写完毕后，<b>系统将自动判断</b>您所填答案是否符合填写规则，如没有问题您将获得<b>20游戏币</b>。
        </p>
        <br>
        <p class="animate__animated animate__bounceInLeft"> &nbsp &nbsp &nbsp &nbsp请根据您内心的想法，给出<span
                style="font-size: 24px"><b>您所认为的答案</b>。</span>：(在做完本次测试后，<span
                style="color: red;">请点击Next</span>按钮) </p>
    </div>

{% endblock %}
{% block content %}


    <link rel="stylesheet" href="{% static 'css/element.css' %}">
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="{% static 'js/element.js' %}"></script>


    <div id="root">
        <test></test>
    </div>
    <template id="table">
        <div>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="决策情境"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="A"
                        width="400">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="B"
                        width='220'>
                </el-table-column>

                <el-table-column
                        prop="address"
                        label="您的选择是">
                    <template slot-scope="scope">
                        {% formfield player.A_q1 %}
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </template>
    <script>
        const table = Vue.extend(
            {
                template: "#table",
                data() {
                    return {
                        tableData: [{
                            date: '1',
                            name: '{{ same_question }}',
                            address: '{{ q_list.0 }}'
                        }, {
                            date: '2',
                            name: '{{ same_question }}',
                            address: '{{ q_list.1 }}'
                        }, {
                            date: '3',
                            name: '{{ same_question }}',
                            address: '{{ q_list.2 }}'
                        }, {
                            date: '4',
                            name: '{{ same_question }}',
                            address: '{{ q_list.3 }}'
                        }, {
                            date: '5',
                            name: '{{ same_question }}',
                            address: '{{ q_list.4 }}'
                        }, {
                            date: '6',
                            name: '{{ same_question }}',
                            address: '{{ q_list.5 }}'
                        }, {
                            date: '7',
                            name: '{{ same_question }}',
                            address: '{{ q_list.6 }}'
                        }, {
                            date: '8',
                            name: '{{ same_question }}',
                            address: '{{ q_list.7 }}'
                        }, {
                            date: '9',
                            name: '{{ same_question }}',
                            address: '{{ q_list.8 }}'
                        }, {
                            date: '10',
                            name: '{{ same_question }}',
                            address: '{{ q_list.9 }}'
                        }]
                    }
                }
            }
        );

        const app = new Vue({
            el: "#root",
            components: {
                'test': table
            }
        })

    </script>

    <script>
        var button = document.getElementsByClassName("el-table__row")
        for (let i = 0; i < button.length; i++) {
            let inputs = button[i].getElementsByTagName("input")
            let labels = button[i].getElementsByTagName('label')

            for (let j = 0; j < inputs.length; j++) {
                let num = i + 1
                //  修改Input标签中的属性   修改label标签的属性
                inputs[j].setAttribute("name", "A_q" + num)
                if (j % 2 == 0) {
                    inputs[j].setAttribute('id', `id_A_q${num}_0`)
                    labels[j].setAttribute('for', `id_A_q${num}_0`)

                } else {
                    inputs[j].setAttribute('id', `id_A_q${num}_1`)
                    labels[j].setAttribute('for', `id_A_q${num}_1`)

                }

            }
        }
    </script>

    <div style="float: right">
        <h4><br>请<span style="color: red;">点击Next</span>按钮<br></h4>
    </div>
    <br/><br/>
    <br/>
    <div style="float:right">
        {% next_button %}

    </div>


{% endblock %}
